<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>07_事件处理</title>
</head>
<body>
<!--
1. 绑定监听:
  v-on:xxx="fun"
  @xxx="fun"
  @xxx="fun(参数)"
  默认事件形参: event
  隐含属性对象: $event
2. 事件修饰符:
  .prevent : 阻止事件的默认行为 event.preventDefault()
  .stop : 停止事件冒泡 event.stopPropagation()
3. 按键修饰符
  .keycode : 操作的是某个keycode值的健
  .enter : 操作的是enter键
-->

<div id="example">

	<h2>1. 绑定监听</h2>
	<button @click="test1">test1</button>
	<button @click="test2('abc')">test2</button>
	<button @click="test3('abcd', $event)">test3</button>

	<h2>2. 事件修饰符</h2>
	<a href="http://www.baidu.com" @click.prevent="test4">百度一下</a>
	<div style="width: 200px;height: 200px;background: red" @click="test5">
		<div style="width: 100px;height: 100px;background: blue" @click.stop="test6"></div>
	</div>

	<h2>3. 按键修饰符</h2>
	<input type="text" @keyup.13="test7">
	<input type="text" @keyup.enter="test7">

</div>

<script type="text/javascript" src="../vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#example',
        data: {

        },
        methods: {
            test1(event) {
                alert(event.target.innerHTML)
            },
            test2 (msg) {
                alert(msg)
            },
            test3 (msg, event) {
                alert(msg+'---'+event.target.textContent)
            },

            test4 () {
                alert('点击了链接')
            },

            test5 () {
                alert('out')
            },
            test6 () {
                alert('inner')
            },

            test7 (event) {
                console.log(event.keyCode)
                alert(event.target.value)
            }
        }
    })
</script>
</body>
</html>